<template>
  <div class="payslip-detail">
    <a-row type="flex">
      <a-col>
        <a-button icon="left" type="link" @click="goBack">返回</a-button>
      </a-col>
      <a-col class="full ta-center fs16">
        <strong>{{ tabs.name }}</strong>
      </a-col>
    </a-row>
    <a-row class="salary" type="flex" align="middle" justify="space-between">
      <a-col class="item" :span="10">
        <a-row ref="box" type="flex" align="middle" justify="space-between">
          <a-col :span="7">
            <a-row>
              <strong class="primary">总共</strong>
            </a-row>
            <a-row class="primary">
              <a-statistic :value="tabs.numAll || 0">
                <template #suffix>人</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height: 42px" type="vertical" />
          <a-col :span="7">
            <a-row>
              <strong class="sub_tit">公司社保合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.companySocAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height: 42px" type="vertical" />
          <a-col :span="7">
            <a-row>
              <strong class="sub_tit">公司公积金合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.numImportNoError || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="item" :span="8">
        <a-row type="flex" align="middle" justify="space-between">
          <a-col :span="10">
            <a-row>
              <strong class="sub_tit">个人社保合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.personalSocAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height: 42px" type="vertical" />
          <a-col :span="10">
            <a-row class="ove">
              <strong class="sub_tit">个人公积金合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.personalPfAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="item" :span="4">
        <a-row>
          <strong class="sub_tit">总合计预缴金额</strong>
        </a-row>
        <a-row>
          <a-statistic :precision="2" :value="tabs.allAmount || 0">
            <template #prefix>￥</template>
          </a-statistic>
        </a-row>
      </a-col>
    </a-row>
    <a-row class="top">
      <a-tabs :default-active-key="defaultKey" @change="changeTab">
        <a-tab-pane key="all" :tab="`总派单${tabs.numAll || 0}人`" />
        <a-tab-pane :key="1" :tab="`已完成${tabs.numHasFinish || 0}人`" />
        <a-tab-pane :key="0" :tab="`未完成${tabs.numNotFinish || 0}人`" />
        <a-tab-pane :key="2" :tab="`异常${tabs.numError || 0}人`" />
      </a-tabs>
      <a-button class="pos">查看统计分析</a-button>
    </a-row>
    <a-input-search v-model="params.name" class="mg_b12" placeholder="搜索姓名" style="width: 200px" @search="onSearchName" />
    <div>
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">批量反馈</a-button>
      <a-table
        :row-key="(a, b) => a.id"
        :columns="columns"
        class="mg_t24"
        list-type="picture"
        :pagination="pagination"
        :data-source="dataSource"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        @change="handlePage"
      >
        <template slot="socEndDate" slot-scope="text, record">
          {{ moment(record.socEndDate).format("YYYY-MM-DD") }}
        </template>
        <template slot="fundEndDate" slot-scope="text, record">
          {{ moment(record.fundEndDate).format("YYYY-MM-DD") }}
        </template>
        <template slot="status" slot-scope="text, record">
          <span class="round" :class="['no', 'ok', 'err'][record.status]" />
          {{ ["未完成", "已完成", "异常"][record.status] }}
        </template>
        <template slot="action" slot-scope="text, record">
          <span class="primary" @click="handelEvent(record)">反馈</span>
        </template>
      </a-table>
    </div>
    <feed-back :visible="feedVisible" :options="feedOptions" @change="handleDetail" />
  </div>
</template>

<script>
const columns = [
  { title: "", dataIndex: "window", scopedSlots: { customRender: "window" } },
  { title: "姓名", dataIndex: "name" },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  { title: "参保方案", dataIndex: "socProgName" },
  {
    title: "社保停缴时间",
    dataIndex: "socEndDate",
    scopedSlots: { customRender: "socEndDate" }
  },
  {
    title: "住房公积金停缴时间",
    dataIndex: "fundEndDate",
    scopedSlots: { customRender: "fundEndDate" }
  },
  { title: "指派公司", dataIndex: "assignCompanyName" },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" }
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];
import { mapState } from "vuex";

export default {
  name: "ShebaoDetail",
  components: { feedBack: () => import("./common/feed-back2") },

  data() {
    return {
      loading: false,
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      columns,
      dataSource: [],
      tabs: {},
      defaultKey: "all",
      feedVisible: false,
      feedOptions: {},
      params: {
        status: undefined,
        showItem: true,
        pageNo: 1,
        pageSize: 10,
        name: ""
      },
      selectedRowKeys: [],
      postData: {
        finshOrError: false,
        remake: "",
        socDispatchCompanyId: "",
        socDispatchEmpIdList: []
      }
    };
  },
  computed: {
    ...mapState(["hr"]),
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },

  created() {
    this.getDetail();
    this.getNavs();
  },

  methods: {
    // 翻页
    handlePage({ current }) {
      this.params.pageNo = current;
      this.pagination.current = current;
      this.getDetail();
    },
    start() {
      this.loading = true;
      this.feedVisible = true;
      this.loading = false;
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // 搜索姓名
    onSearchName(name) {
      name ? (this.params.name = name) : delete this.params.name;
      this.selectedRowKeys = [];
      this.params.pageNo = 1;
      this.pagination.current = 1;
      this.getDetail();
    },
    goBack() {
      this.$router.push({
        path: `/shebao/jiedan`,
        query: { ...this.$route.query }
      });
    },
    getDetail() {
      console.log(this.$route.query, "this.$route.query");
      const { id } = this.$route.query;
      this.$request({
        url: `/hr/api/v1/socDispatchCompanies/pageEmpLess/${id}`,
        params: { ...this.params, ...this.$route.query }
      }).then(({ data }) => {
        this.dataSource = data.entities;
        this.pagination.total = data.entityCount;
      });
    },
    getNavs() {
      const { id } = this.$route.query;
      this.$request({
        url: `/hr/api/v1/socDispatchCompanies/details/${id}`
      }).then(({ data }) => {
        this.tabs = data;
      });
    },
    // 切换详情
    changeTab(i) {
      this.params.name = "";
      this.selectedRowKeys = [];
      this.defaultKey = i;
      this.params.status = "";
      this.params.pageNo = 1;
      this.pagination.current = 1;
      if (typeof i === "number") {
        this.params.status = i;
      }
      this.getDetail();
    },

    handleDetail({ visible, success, options }) {
      this.feedVisible = visible;
      if (!success) {
        this.selectedRowKeys = [];
        this.getDetail();
      }
      if (success) {
        this.postData.finshOrError = [true, false][options.status - 1];
        this.postData.remake = options.remake;
        this.postData.socDispatchCompanyId = this.$route.query.id;
        this.postData.socDispatchEmpIdList = this.selectedRowKeys.length ? this.selectedRowKeys : [options.id];
        this.commitFeedBack();
      }
    },
    // 反馈消息
    handelEvent(e) {
      this.feedVisible = true;
      this.feedOptions = e;
    },
    // 提交反馈
    commitFeedBack() {
      this.$request({
        url: `/hr/api/v1/socDispatchCompanies/feedBack`,
        method: "post",
        data: this.postData
      }).then(({ success }) => {
        if (success) {
          this.getDetail();
          this.getNavs();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.payslip-detail {
  padding: 24px;
  .top {
    position: relative;
    padding-left: 15px;
    .pos {
      position: absolute;
      right: 0;
      top: 6px;
    }
  }
  >>> .ant-statistic-content {
    font-size: 18px;
  }
}
.salary {
  cursor: pointer;
  margin: 24px 0;
  .item {
    padding: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  >>> .ant-statistic-content {
    font-size: 18px;
  }
}
.inner-box {
  display: flex;
  flex-direction: row;
  height: 600px;
  .inner-left {
    width: 300px;
  }
  .inner-right {
    width: calc(100% - 300px);
  }
}
.center {
  text-align: center;
}
.info-left {
  border-right: 1px solid #ccc;
  padding: 20px 56px 30px 0;
  width: 350px;

  .info-item {
    line-height: 34px;
  }
  .name {
    margin-top: 16px;
  }
}
.inner-right-foot {
  padding: 16px;
}
.round {
  height: 8px;
  width: 8px;
  display: inline-block;
  border-radius: 8px;
}
.no {
  background: #fd7d4c;
}
.ok {
  background: #48cb9e;
}
.err {
  background: red;
}
</style>
